<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <i class="el-icon-document"></i>
        <span style="margin-left: 8px; font-weight: bold">出入记录</span>
      </div>
      <el-row :gutter="40" style="padding: 30px 0">
        <el-col :span="14">
          <div
            v-if="parkingRecord"
            style="font-size: 16px; margin-bottom: 10px"
          >
            <span style="font-weight: bold">车牌</span>
            <span
              style="
                background: #f56c6c;
                color: #fff;
                border-radius: 12px;
                padding: 2px 12px;
                margin: 0 10px;
              "
              >{{ parkingRecord.plateNumber || "未识别" }}</span
            >
            <el-tag type="danger" v-if="parkingRecord.vehicleType === 1"
              >月租车</el-tag
            >
            <el-tag type="warning" v-else>临时车辆</el-tag>
            <el-tag type="success" v-if="parkingRecord.status === 0"
              >进场</el-tag
            >
            <el-tag type="info" v-else-if="parkingRecord.status === 1"
              >离场</el-tag
            >
          </div>
          <div
            v-if="parkingRecord && parkingRecord.ownerName"
            style="margin-bottom: 8px"
          >
            车主：{{ parkingRecord.ownerName }}
          </div>
          <div
            v-if="parkingRecord && parkingRecord.ownerPhone"
            style="margin-bottom: 8px"
          >
            手机号：{{ parkingRecord.ownerPhone }}
          </div>
          <div
            v-if="parkingRecord && parkingRecord.startTime"
            style="margin-bottom: 8px"
          >
            进入时间：{{ formatDateTime(parkingRecord.startTime) }}
          </div>
          <div
            v-if="parkingRecord && parkingRecord.endTime"
            style="margin-bottom: 8px"
          >
            离开时间：{{ formatDateTime(parkingRecord.endTime) }}
          </div>
          <div
            v-if="
              parkingRecord && parkingRecord.startTime && parkingRecord.endTime
            "
            style="margin-bottom: 8px"
          >
            停放时长：{{
              calculateDuration(parkingRecord.startTime, parkingRecord.endTime)
            }}
          </div>

          <!-- 订单信息部分 -->
          <div
            v-if="
              parkingRecord &&
              parkingRecord.status === 1 &&
              parkingRecord.vehicleType === 0
            "
            style="
              margin-top: 20px;
              padding: 15px;
              background: #f8f8f8;
              border-radius: 5px;
              border-left: 4px solid #409eff;
            "
          >
            <div style="font-weight: bold; margin-bottom: 10px; color: #303133">
              订单信息
            </div>
            <div style="margin-bottom: 8px">
              订单号：{{ parkingRecord.orderId }}
            </div>
            <div style="margin-bottom: 8px">
              停车费用：<span
                style="color: #f56c6c; font-weight: bold; font-size: 18px"
                >￥{{ parkingRecord.fee }}</span
              >
            </div>
            <div style="margin-bottom: 15px">
              支付状态：
              <el-tag type="success" v-if="parkingRecord.doPay === 1"
                >已支付</el-tag
              >
              <el-tag type="danger" v-else>未支付</el-tag>
            </div>
            <div v-if="parkingRecord.doPay === 0">
              <el-button type="primary" @click="payOrder" :loading="paymentLoading">立即支付</el-button>
              <el-tag type="warning" style="margin-left: 10px"
                >未支付无法放行</el-tag
              >
            </div>
            <div v-else>
              <el-tag type="success" icon="el-icon-check"
                >已完成支付，可以放行</el-tag
              >
            </div>
            
            <!-- 支付确认区域 -->
            <div v-if="showPaymentConfirmation" style="margin-top: 15px; border-top: 1px dashed #dcdfe6; padding-top: 15px;">
              <div style="font-weight: bold; margin-bottom: 10px; color: #67c23a;">
                <i class="el-icon-question"></i> 支付确认
              </div>
              <p style="margin-bottom: 10px; color: #606266; font-size: 14px;">
                如果您已在支付宝完成支付，但系统未自动更新状态，可点击下方按钮手动确认支付。
              </p>
              <div style="display: flex; align-items: center;">
                <el-button type="success" @click="confirmPayment" :loading="confirmLoading">
                  <i class="el-icon-check"></i> 我已完成支付
                </el-button>
                <el-button type="info" @click="checkPayment" :loading="checkingPayment">
                  <i class="el-icon-refresh"></i> 检查支付状态
                </el-button>
              </div>
            </div>
            
          </div>

          <div v-if="!parkingRecord" style="margin-top: 20px; color: #909399">
            请使用摄像头拍摄车辆照片进行识别
          </div>
          <div
            v-if="parkingRecord && !parkingRecord.plateNumber"
            style="color: #f56c6c; margin-top: 20px"
          >
            未能识别车牌，请重新拍照或手动输入
          </div>
        </el-col>

        <el-col :span="10" style="text-align: center">
          <img
            :src="accessCarImg"
            alt="出入照片"
            style="
              width: 220px;
              height: 140px;
              object-fit: cover;
              border-radius: 6px;
              border: 1px solid #eee;
            "
            v-if="accessCarImg"
          />
          <div style="margin-top: 10px; color: #888" v-if="accessCarImg">
            车辆照片
          </div>

          <!-- 摄像头容器 - 始终存在但可能隐藏 -->
          <div style="margin-top: 30px">
            <!-- 摄像头视频元素 - 始终存在，但根据状态显示或隐藏 -->
            <div style="position: relative; margin-bottom: 10px">
              <!-- 视频元素始终存在，但可能被隐藏 -->
              <video
                ref="video"
                width="220"
                height="140"
                autoplay
                style="border-radius: 6px; border: 1px solid #eee"
                :style="{ display: !captured ? 'block' : 'none' }"
              ></video>

              <!-- 加载状态覆盖层 -->
              <div
                v-if="!cameraInitialized && !captured"
                style="
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  background: rgba(255, 255, 255, 0.8);
                "
              >
                <i
                  class="el-icon-loading"
                  style="font-size: 24px; color: #409eff"
                ></i>
                <div style="margin-top: 10px; color: #909399; font-size: 14px">
                  摄像头初始化中...
                </div>
              </div>

              <!-- 已拍照图片 -->
              <img
                v-if="captured"
                :src="capturedImg"
                width="220"
                height="140"
                style="border-radius: 6px; border: 1px solid #eee"
              />
            </div>

            <div>
              <el-button
                type="primary"
                @click="capturePhoto"
                v-if="!captured"
                :disabled="!cameraInitialized || loading"
              >
                <i class="el-icon-camera" style="margin-right: 5px"></i>拍照车牌
              </el-button>
              <el-button @click="resetPhoto" v-if="captured" :disabled="loading"
                >重新拍照</el-button
              >
              <el-button
                @click="resetCamera"
                type="text"
                style="margin-left: 10px"
                :disabled="loading"
              >
                <i class="el-icon-refresh"></i> 重置摄像头
              </el-button>
            </div>
            <div v-if="loading" style="margin-top: 10px; text-align: center">
              <i class="el-icon-loading"></i> 识别中...
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 支付弹窗 -->
    <div id="payment-modal" class="payment-modal" v-if="showIframePayment">
      <div class="payment-modal-content">
        <div class="payment-modal-header">
          <span class="payment-modal-title">支付宝支付</span>
          <button class="payment-modal-close" @click="closePaymentModal">&times;</button>
        </div>
        <div class="payment-modal-body">
          <div class="payment-notice">
            <p>正在加载支付宝支付页面，请稍候...</p>
            <p class="payment-tips">
              <i class="el-icon-warning-outline"></i> 
              提示：如果页面显示异常，请点击<button @click="openInNewWindow" class="text-button">在新窗口打开</button>
            </p>
          </div>
          <iframe 
            ref="paymentIframe" 
            class="payment-iframe" 
            frameborder="0"
            scrolling="auto"
            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ParkingRecord from "./ParkingRecord.vue";

export default {
  name: "ParkingRecordDetail",
  data() {
    return {
      accessCarImg: "",
      captured: false,
      capturedImg: "",
      parkingRecord: null,
      loading: false,
      cameraInitialized: false,
      cameraRetries: 0,
      paymentLoading: false,
      paymentTimer: null,
      payWindow: null,
      showIframePayment: false,
      showPaymentConfirmation: false,
      confirmLoading: false,
      checkingPayment: false
    };
  },
  mounted() {
    // 延迟更长时间再初始化摄像头，确保DOM已完全渲染
    setTimeout(() => {
      this.startCamera();
    }, 1000);
  },
  methods: {
    test() {
      // 设置loading状态
      this.loading = true;

      // 现在直接使用capturedImg（base64图片数据）
      const params = new URLSearchParams();
      params.append("imageBase64", this.capturedImg.split(",")[1]); // 去掉base64前缀部分

      this.$axios
        .post("api/vehicle-server/vehicle/vehicleAccess", params)
        .then((res) => {
          this.loading = false;
          if (res.data.code == 200) {
            if (res.data.data) {
              this.parkingRecord = res.data.data;

              // 根据状态显示不同消息
              if (this.parkingRecord.status === 0) {
                this.$message.success("车辆进场记录已保存");
              } else {
                if (this.parkingRecord.vehicleType === 1) {
                  // 月租车
                  this.$message.success("月租车离场记录已更新");
                } else if (this.parkingRecord.vehicleType === 0) {
                  // 临时车辆
                  this.$message.warning("临时车辆需要支付停车费用才能离场");
                }
              }
            } else {
              this.$message.warning("未能识别车牌，请重新拍照或调整角度");
            }
          } else {
            this.$message.error("车牌识别失败：" + res.data.message);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.error("识别失败:", err);
          this.$message.error("识别请求失败，请重试");
        });
    },

    // 支付订单
    payOrder() {
      if (!this.parkingRecord || !this.parkingRecord.orderId) {
        this.$message.error("订单信息不完整，无法支付");
        return;
      }

      this.paymentLoading = true;
      this.$message.info("正在准备支付链接，请稍候...");

      // 调用支付接口
      this.$axios
        .post(
          `api/vehicle-server/vehicle/payOrder?orderId=${this.parkingRecord.orderId}`
        )
        .then((res) => {
          this.paymentLoading = false;
          console.log("支付接口返回数据:", res.data);
          
          if (res.data.code === 200) {
            const paymentData = res.data.data;
            
            // 处理返回的支付数据
            if (paymentData) {
              let paymentContent = '';
              
              // 判断返回的是字符串还是对象
              if (typeof paymentData === 'string') {
                paymentContent = paymentData;
              } else if (paymentData.payUrl) {
                paymentContent = paymentData.payUrl;
              } else {
                // 尝试找到对象中可能包含支付信息的属性
                const possibleKeys = ['url', 'form', 'body', 'content'];
                for (const key of possibleKeys) {
                  if (paymentData[key]) {
                    paymentContent = paymentData[key];
                    break;
                  }
                }
              }
              
              if (!paymentContent) {
                this.$message.error("无法解析支付接口返回的数据");
                return;
              }
              
              // 处理支付内容
              this.processPaymentContent(paymentContent);
            } else {
              this.$message.error("支付接口返回了空数据");
            }
          } else {
            this.$message.error("获取支付链接失败：" + (res.data.message || res.data.msg || "未知错误"));
          }
        })
        .catch((err) => {
          this.paymentLoading = false;
          console.error("支付请求错误:", err);
          this.$message.error("支付请求失败，请稍后重试");
        });
    },

    // 处理支付内容
    processPaymentContent(content) {
      // 判断内容是HTML表单还是URL
      const isHtmlForm = content.includes('<form') && content.includes('action=');
      
      if (isHtmlForm) {
        // 如果是HTML表单，直接提交
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = content;
        document.body.appendChild(tempContainer);
        
        const form = tempContainer.querySelector('form');
        if (form) {
          // 设置在新窗口打开，避免导航问题
          form.target = '_blank';
          
          // 修复可能存在的action URL问题（处理gateway.do重复问题）
          const actionAttr = form.getAttribute('action');
          if (actionAttr && actionAttr.includes('gateway.do/gateway.do')) {
            const fixedAction = actionAttr.replace('gateway.do/gateway.do', 'gateway.do');
            form.setAttribute('action', fixedAction);
          }
          
          this.$message.success("正在打开支付宝支付页面...");
          
          // 提交表单
          setTimeout(() => {
            form.submit();
            document.body.removeChild(tempContainer);
            
            // 启动支付状态检查
            this.checkPaymentStatus();
            
            // 显示手动确认区域
            this.showPaymentConfirmation = true;
          }, 500);
        } else {
          this.$message.error("无法解析支付表单");
          console.error("支付表单解析失败:", content.substring(0, 100) + "...");
        }
      } else {
        // 假设是URL，直接打开
        let payUrl = content;
        
        // 修复常见的支付宝URL问题
        if (payUrl.includes('gateway.do/gateway.do')) {
          payUrl = payUrl.replace('gateway.do/gateway.do', 'gateway.do');
        }
        
        // 添加时间戳防止缓存
        const timestamp = new Date().getTime();
        const connector = payUrl.includes('?') ? '&' : '?';
        const finalUrl = `${payUrl}${connector}_t=${timestamp}`;
        
        // 创建表单提交，这样更可靠
        const form = document.createElement('form');
        form.method = 'GET';
        form.action = finalUrl;
        form.target = '_blank';
        document.body.appendChild(form);
        
        this.$message.success("正在打开支付宝支付页面...");
        
        // 提交表单
        setTimeout(() => {
          form.submit();
          document.body.removeChild(form);
          
          // 启动支付状态检查
          this.checkPaymentStatus();
          
          // 显示手动确认区域
          this.showPaymentConfirmation = true;
          
          // 显示支付提示
          this.$notify({
            title: '支付提示',
            message: '支付完成后请关闭支付窗口返回本页面，系统将自动检查支付状态',
            type: 'info',
            duration: 8000
          });
        }, 500);
      }
    },

    // 检查支付状态的方法
    checkPaymentStatus() {
      if (!this.parkingRecord || !this.parkingRecord.orderId) return;
      
      // 创建支付状态检查定时器
      let checkCount = 0;
      const maxChecks = 30; // 最多检查30次
      
      // 清除可能存在的旧计时器
      if (this.paymentTimer) {
        clearInterval(this.paymentTimer);
      }
      
      this.paymentTimer = setInterval(() => {
        checkCount++;
        if (checkCount > maxChecks) {
          clearInterval(this.paymentTimer);
          this.$message.info("支付状态检查已超时，请手动刷新页面查看最新状态");
          return;
        }
        
        // 调用检查支付状态的API
        this.$axios.get(`api/vehicle-server/vehicle/orderStatus/${this.parkingRecord.orderId}`)
          .then(res => {
            if (res.data.code === 200 && res.data.data === true) {
              // 支付成功
              clearInterval(this.paymentTimer);
              this.$message.success("支付成功！");
              
              // 更新本地支付状态
              this.parkingRecord.doPay = 1;
              this.parkingRecord.canExit = true;
              
              // 提示用户
              this.$notify({
                title: '支付成功',
                message: '车辆已可以离场',
                type: 'success',
                duration: 5000
              });
            }
          })
          .catch(err => {
            console.error("检查支付状态出错:", err);
          });
      }, 3000); // 每3秒检查一次
    },

    // 停止当前摄像头流
    stopCamera() {
      try {
        if (this.$refs.video && this.$refs.video.srcObject) {
          const tracks = this.$refs.video.srcObject.getTracks();
          tracks.forEach((track) => track.stop());
          this.$refs.video.srcObject = null;
        }
      } catch (err) {
        console.error("停止摄像头出错:", err);
      }
      this.cameraInitialized = false;
    },

    // 重置摄像头
    resetCamera() {
      this.stopCamera();
      this.cameraRetries = 0;
      this.$message.info("正在重新初始化摄像头...");
      setTimeout(() => {
        this.startCamera();
      }, 1000);
    },

    startCamera() {
      console.log("开始初始化摄像头...");

      try {
        // 首先尝试检查video元素是否存在
        const videoElement = this.$refs.video;
        console.log("视频元素状态:", videoElement ? "已找到" : "未找到");

        if (!videoElement) {
          // 如果重试次数小于5次，尝试再次初始化
          if (this.cameraRetries < 5) {
            this.cameraRetries++;
            console.log(`尝试重新初始化摄像头 (${this.cameraRetries}/5)...`);
            setTimeout(() => {
              this.startCamera();
            }, 1000);
            return;
          } else {
            this.$message.error(
              "摄像头初始化失败：视频元素未找到，请刷新页面重试"
            );
            return;
          }
        }

        // 检查浏览器是否支持摄像头
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
          this.$message.error("您的浏览器不支持摄像头功能");
          return;
        }

        // 尝试访问摄像头
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then((stream) => {
            console.log("摄像头访问成功，设置视频流");
            const videoElement = this.$refs.video;
            if (videoElement) {
              videoElement.srcObject = stream;
              this.cameraInitialized = true;
              console.log("摄像头初始化成功");
            } else {
              console.error("视频元素在设置流时未找到");
              throw new Error("视频元素在设置流时未找到");
            }
          })
          .catch((err) => {
            console.error("摄像头访问错误:", err);
            let errorMsg = "无法访问摄像头";

            if (
              err.name === "NotAllowedError" ||
              err.name === "PermissionDeniedError"
            ) {
              errorMsg = "请允许浏览器访问摄像头权限";
            } else if (
              err.name === "NotFoundError" ||
              err.name === "DevicesNotFoundError"
            ) {
              errorMsg = "未检测到摄像头设备";
            } else if (
              err.name === "NotReadableError" ||
              err.name === "TrackStartError"
            ) {
              errorMsg = "摄像头被其他应用占用";
            } else if (err.name === "OverconstrainedError") {
              errorMsg = "摄像头不满足要求";
            }

            this.$message.error(
              errorMsg + (err.message ? `: ${err.message}` : "")
            );
          });
      } catch (err) {
        console.error("初始化摄像头过程中发生异常:", err);
        this.$message.error("初始化摄像头失败: " + err.message);
      }
    },

    capturePhoto() {
      if (!this.$refs.video) {
        this.$message.error("摄像头未就绪，请刷新页面重试");
        return;
      }

      try {
        const video = this.$refs.video;
        const canvas = document.createElement("canvas");
        canvas.width = 220;
        canvas.height = 140;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, 220, 140);
        this.capturedImg = canvas.toDataURL("image/png");
        this.accessCarImg = this.capturedImg;
        this.captured = true;
        this.test();
      } catch (err) {
        console.error("拍照过程中出错:", err);
        this.$message.error("拍照失败: " + err.message);
      }
    },

    resetPhoto() {
      this.captured = false;
      this.capturedImg = "";
      this.parkingRecord = null;
      // 不需要重新初始化摄像头，只需要显示已经存在的视频流
    },

    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return "";
      const date = new Date(dateTimeStr);
      return date
        .toLocaleString("zh-CN", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
        })
        .replace(/\//g, "-");
    },

    calculateDuration(startTime, endTime) {
      if (!startTime || !endTime) return "";

      const start = new Date(startTime);
      const end = new Date(endTime);

      const durationMs = end - start;
      const hours = Math.floor(durationMs / (1000 * 60 * 60));
      const minutes = Math.floor((durationMs % (1000 * 60 * 60)) / (1000 * 60));

      return `${hours}小时${minutes}分钟`;
    },

    openInNewWindow() {
      if (this.$refs.paymentIframe && this.$refs.paymentIframe.src) {
        window.open(this.$refs.paymentIframe.src, '_blank');
        this.closePaymentModal();
      }
    },

    // 关闭iframe支付弹窗
    closePaymentModal() {
      this.showIframePayment = false;
      const modal = document.getElementById('payment-modal');
      if (modal) modal.style.display = 'none';
    },

    // 手动确认支付
    confirmPayment() {
      if (!this.parkingRecord || !this.parkingRecord.orderId) {
        this.$message.error("订单信息不完整，无法确认支付");
        return;
      }
      
      this.confirmLoading = true;
      
      // 调用手动确认支付接口
      this.$axios
        .post(`api/vehicle-server/vehicle/dopay`, {
          out_trade_no: this.parkingRecord.orderId
        })
        .then(res => {
          this.confirmLoading = false;
          if (res.data.code === 200) {
            // 更新本地状态
            this.parkingRecord.doPay = 1;
            this.parkingRecord.canExit = true;
            this.showPaymentConfirmation = false;
            
            // 显示成功消息
            this.$message.success("支付状态已更新，车辆可以离场");
            this.$notify({
              title: '支付成功',
              message: '车辆已可以离场',
              type: 'success',
              duration: 5000
            });
            
            // 清除定时器
            if (this.paymentTimer) {
              clearInterval(this.paymentTimer);
            }
          } else {
            this.$message.error("确认支付失败：" + (res.data.message || "未知错误"));
          }
        })
        .catch(err => {
          this.confirmLoading = false;
          console.error("确认支付出错:", err);
          this.$message.error("确认支付请求失败，请重试");
        });
    },
    
    // 手动检查支付状态
    checkPayment() {
      if (!this.parkingRecord || !this.parkingRecord.orderId) {
        this.$message.error("订单信息不完整，无法检查支付状态");
        return;
      }
      
      this.checkingPayment = true;
      
      // 调用检查支付状态API
      this.$axios
        .get(`api/vehicle-server/vehicle/orderStatus/${this.parkingRecord.orderId}`)
        .then(res => {
          this.checkingPayment = false;
          if (res.data.code === 200) {
            if (res.data.data === true) {
              // 支付成功
              this.parkingRecord.doPay = 1;
              this.parkingRecord.canExit = true;
              this.showPaymentConfirmation = false;
              
              // 显示成功消息
              this.$message.success("支付已确认，车辆可以离场");
              this.$notify({
                title: '支付成功',
                message: '车辆已可以离场',
                type: 'success',
                duration: 5000
              });
              
              // 清除定时器
              if (this.paymentTimer) {
                clearInterval(this.paymentTimer);
              }
            } else {
              this.$message.warning("系统尚未检测到支付，请稍后再试或选择手动确认");
            }
          } else {
            this.$message.error("检查支付状态失败：" + (res.data.message || "未知错误"));
          }
        })
        .catch(err => {
          this.checkingPayment = false;
          console.error("检查支付状态出错:", err);
          this.$message.error("检查支付状态请求失败，请重试");
        });
    },
  },
  beforeDestroy() {
    // 组件销毁时关闭摄像头
    this.stopCamera();
  },
};
</script>

<style scoped>
.el-card {
  margin: 20px 0;
}

/* 支付弹窗样式 */
.payment-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.payment-modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 5% auto;
  padding: 0;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  width: 80%;
  max-width: 800px;
  height: 80%;
  max-height: 600px;
  overflow: hidden;
}

.payment-modal-header {
  padding: 12px 20px;
  background-color: #409EFF;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-modal-title {
  font-size: 18px;
  font-weight: bold;
}

.payment-modal-close {
  color: white;
  background: transparent;
  border: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.payment-modal-body {
  padding: 0;
  height: calc(100% - 50px);
  position: relative;
}

.payment-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.payment-notice {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.payment-tips {
  color: #E6A23C;
  font-size: 14px;
  margin-top: 10px;
}

.text-button {
  background: none;
  color: #409EFF;
  border: none;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 5px;
}
</style> 